<template>
  <article class="project-card" @click="$emit('click', project)">
    <div class="project-cover">
      <img :src="project.cover" :alt="project.name" loading="lazy" />
      <div class="project-overlay">
        <div class="overlay-content">
          <i class="ri-eye-line"></i>
          <span>查看详情</span>
        </div>
      </div>
      <div class="project-tags">
        <span v-for="tag in project.tags" :key="tag" class="tag">{{ tag }}</span>
      </div>
    </div>
    <div class="project-info">
      <h3 class="project-title">{{ project.name }}</h3>
      <p class="project-desc">{{ project.shortDesc }}</p>
      <div class="project-links">
        <a
          v-if="project.github"
          :href="project.github"
          @click.stop
          target="_blank"
          rel="noopener noreferrer"
          class="link-btn github"
          title="GitHub"
        >
          <i class="ri-github-fill"></i>
        </a>
        <a
          v-if="project.gitee"
          :href="project.gitee"
          @click.stop
          target="_blank"
          rel="noopener noreferrer"
          class="link-btn gitee"
          title="Gitee"
        >
          <svg viewBox="0 0 1092 1024" width="20" height="20" fill="currentColor">
            <path
              d="M514.13 1024c-282.77 0-512-229.23-512-512S231.37 0 514.13 0 1026.13 229.23 1026.13 512 796.9 1024 514.13 1024zm259.16-568.89l-290.76.01c-13.97 0-25.29 11.32-25.29 25.27l-.03 63.22c0 13.97 11.31 25.29 25.27 25.29h177.02c13.97 0 25.29 11.31 25.29 25.27v12.64a75.85 75.85 0 0 1-75.85 75.85H368.74a25.29 25.29 0 0 1-25.29-25.27V417.19a75.85 75.85 0 0 1 75.85-75.85l353.92-.02c13.97 0 25.27-11.31 25.29-25.27l.07-63.19c0-13.97-11.31-25.29-25.27-25.3l-353.99.01c-104.72-.01-189.62 84.89-189.62 189.61v353.96c0 13.97 11.32 25.29 25.29 25.29h372.93c94.27 0 170.67-76.4 170.67-170.67V480.4c0-13.95-11.32-25.27-25.29-25.27z"
            />
          </svg>
        </a>
        <a
          v-if="project.demo"
          :href="project.demo"
          @click.stop
          target="_blank"
          rel="noopener noreferrer"
          class="link-btn demo"
          title="在线演示"
        >
          <i class="ri-external-link-line"></i>
        </a>
      </div>
    </div>
  </article>
</template>

<script setup>
defineProps({
  project: {
    type: Object,
    required: true,
  },
})

defineEmits(['click'])
</script>

<style lang="scss" scoped>
.project-card {
  background: var(--bg-base);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow-light);
  transition: var(--transition-base);
  cursor: pointer;
  border: 1px solid var(--border-lighter);
  display: flex;
  flex-direction: column;
  height: 100%;

  &:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-medium);

    .project-cover {
      img {
        transform: scale(1.1);
      }

      .project-overlay {
        opacity: 1;
      }
    }
  }

  .project-cover {
    position: relative;
    width: 100%;
    height: 220px;
    overflow: hidden;
    background: var(--bg-light);

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .project-overlay {
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, 0.6);
      backdrop-filter: blur(4px);
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transition: var(--transition-base);

      .overlay-content {
        display: flex;
        align-items: center;
        gap: 8px;
        color: #fff;
        font-size: 16px;
        font-weight: 500;

        i {
          font-size: 20px;
        }
      }
    }

    .project-tags {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 16px;
      background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
      display: flex;
      flex-wrap: wrap;
      gap: 8px;

      .tag {
        padding: 4px 12px;
        border-radius: 12px;
        font-size: 12px;
        font-weight: 500;
        background: rgba(255, 255, 255, 0.2);
        color: #fff;
        backdrop-filter: blur(8px);
      }
    }
  }

  .project-info {
    padding: 24px;
    flex: 1;
    display: flex;
    flex-direction: column;

    .project-title {
      font-size: 20px;
      font-weight: 700;
      color: var(--text-primary);
      margin-bottom: 12px;
      line-height: 1.4;
    }

    .project-desc {
      font-size: 14px;
      color: var(--text-regular);
      line-height: 1.6;
      margin-bottom: 20px;
      flex: 1;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .project-links {
      display: flex;
      gap: 12px;
      margin-top: auto;

      .link-btn {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--bg-light);
        color: var(--text-regular);
        transition: var(--transition-base);
        text-decoration: none;

        i,
        svg {
          font-size: 20px;
        }

        &:hover {
          transform: translateY(-3px);
          box-shadow: var(--shadow-light);
        }

        &.github:hover {
          background: #24292e;
          color: #fff;
        }

        &.gitee:hover {
          background: #c71d23;
          color: #fff;
        }

        &.demo:hover {
          background: var(--color-primary);
          color: #fff;
        }
      }
    }
  }
}

@media (max-width: 768px) {
  .project-card {
    .project-cover {
      height: 180px;
    }

    .project-info {
      padding: 20px;

      .project-title {
        font-size: 18px;
      }

      .project-desc {
        font-size: 13px;
      }
    }
  }
}
</style>
